<template>
	<view class="container pb-con">
		<navbar bgColor="#ffffff" title=" " :isBack="false" :wxnavBarHeight="0"></navbar>
		<view class="swiper_1 swiper-box">
			<view class="back" @click="backUrl">
				<image :src="$img_path('/course/49.png')" mode="widthFix"></image>
			</view>
			
			<swiper :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="$img_path('/course/index/bg.png')" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="contant">
			<view class="info">
				<view class="name">
					<image :src="$img_path('/course/uni.png')" mode="aspectFill"></image>
					<view class="text">
						**老师
					</view>
					<view class="r-btn">
						<button>
							<image :src="$img_path('/course/classify/icon1.png')" mode="widthFix"></image>
							<text>关注</text>
						</button>
					</view>
				</view>
				<view class="tag">
					<view class="item" v-for="(item,i) in 3" :key="i">
						标签标签
					</view>
				</view>
				<view class="jianjie">
					简介：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容...
				</view>
			</view>
			<view class="tablist">
				<view class="tab_item" v-for="(item,i) in tabList" :key="i">
					<text :class="tab_index==item.value ?'select':''">{{item.text}}</text>
					<image v-if="tab_index==item.value" :src="$img_path('/course/classify/icon9.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="list">
				<view class="offline_item" v-for="(item,i) in 3">
					<view class="img-box">
						<image :src="$img_path('/course/audio/bg.png')" mode="aspectFill"></image>
						<view class="tip">
							<text>开课时间：2024-05-20 09:00</text>
							<button class="ing" v-if="i==0">报名中</button>
							<button class="load" v-if="i==1">未开始</button>
							<button class="end" v-if="i==2">已结束</button>
						</view>
					</view>
					<view class="info">
						<view class="title one-row">
							课程标题课程标题课程标题课程标题课程标题程标题课程标
						</view>
						<view class="i-2">
							<text>线下 | 郑州 | 讲师：张三老师</text>
							<view class="right">
								<image :src="$img_path('/course/img/2.png')" mode="widthFix"></image>
								<text>0.3km</text>
							</view>
						</view>
						<view class="price">
							<view class="left">
								<view class="num">
									<text>￥</text>100
								</view>
								<text>￥699</text>
							</view>
							<view class="right">
								已报名：0
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsBox from '../../components/service-box/goods-box.vue'
	export default {
		components:{
			goodsBox
		},
		data() {
			return {
				tabList:[
					{
						text:'全部',
						value:1
					},{
						text:'报名中',
						value:2
					},{
						text:'未开始',
						value:3
					},{
						text:'已结束',
						value:4
					},
				],
				tab_index:1
			};
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:'老师详情'
			})
		},
		methods:{
			backUrl(){
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	.swiper_1{
		width: 100%;
		height: 458rpx;
		position: relative;
		.back{
			width: 60rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.4);
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			z-index: 1;
			border-radius: 50%;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		swiper{
			width: 100%;
			height: 100%;
			swiper-item{
				width: 100%;
				height: 100%;
			}
			.swiper-item{
				width: 100%;
				// border-radius: 20rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 458rpx;
				}
			}
		}
	}
	
	.contant{
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 22rpx 0;
		box-sizing: border-box;
		margin-top: -80rpx;
		position: relative;
		z-index: 6;
		.info{
			padding: 0 22rpx 20rpx;
			.name{
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&>image{
					position: absolute;
					bottom: -10rpx;
					left: 0;
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}
				.text{
					padding-left: 226rpx;
				}
				.r-btn{
					button{
						width: 126rpx;
						height: 64rpx;
						background: #E72A2A;
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 24rpx;
							height: 24rpx;
						}
						text{
							font-weight: bold;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							margin-left: 6rpx;
						}
					}
				}
			}
		
			.tag{
				display: flex;
				padding-top: 30rpx;
				.item{
					height: 34rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 2rpx solid #0291FF;
					padding: 0 20rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #0291FF;
					line-height: 34rpx;
					text-align: center;
					margin-right: 10rpx;
				}
			}
			.jianjie{
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				margin-top: 20rpx;
			}
		}
		
		.tablist {
			border-top: 10rpx solid #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 60rpx 32rpx;
			.tab_item {
				position: relative;
				text {
					font-weight: bold;
					font-size: 32rpx;
					color: #999999;
					line-height: 44rpx;
		
					&.select {
						color: #333333;
					}
				}
				image {
					width: 38rpx;
					height: 12rpx;
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		.list{
			padding-top: 20rpx;
			padding: 20rpx 22rpx 0;
			.offline_item{
				width: 100%;
				background: #F8F8F8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #EFEFEF;
				overflow: hidden;
				margin-bottom: 20rpx;
				.img-box{
					position: relative;
					width: 100%;
					&>image{
						width: 100%;
						height: 505rpx;
						display: block;
					}
					.tip{
						position: absolute;
						width: 100%;
						left: 0;
						bottom: 0;
						padding: 20rpx 10rpx 18rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						background-color: rgba(0, 0, 0, 0.4);
						text{
							font-weight: bold;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 42rpx;
						}
						button{
							width: 112rpx;
							height: 52rpx;
							border-radius: 8rpx;
							font-weight: bold;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 52rpx;
							&.ing{
								background: #0291FF;
							}
							&.load{
								background: #E72A2A;
							}
							&.end{
								background: #333333;
							}
						}
					}
				}
				.info{
					padding: 20rpx;
					box-sizing: border-box;
					.title{
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						line-height: 44rpx;
					}
					.i-2{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 4rpx;
						&>text{
							font-weight: bold;
							font-size: 26rpx;
							color: #999999;
							line-height: 36rpx;
						}
						.right{
							display: flex;
							align-items: center;
							image{
								width: 40rpx;
								height: 40rpx;
								margin-right: 12rpx;
							}
							text{
								font-weight: bold;
								font-size: 26rpx;
								color: #333333;
								line-height: 36rpx;
							}
						}
					}
					.price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 2rpx;
						.left{
							display: flex;
							align-items: flex-end;
							.num{
								font-weight: 900;
								font-size: 40rpx;
								color: #FF2E2E;
								line-height: 54rpx;
								text{
									font-size: 32rpx;
								}
							}
							&>text{
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								line-height: 54rpx;
								text-decoration: line-through;
							}
						}
						.right{
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
						}
					}
				}
			}
		}
	}
}
</style>
